import { Tag } from 'antd'
import c from 'classnames'
import  defaultAvatar  from '@/desktop/assets/avatar.jpg'
import { type AtMember, makeElementId } from './logics'
import './Member.module.less'

export default function Member(props: {
  member: AtMember
  isCreator: boolean // 是否是群主
  isHighlight: boolean // 是否高亮显示
  highlight: (userId: string) => void // 将此成员高亮
  confirm: (member: AtMember) => void // 确认 at 此成员
  style?: React.CSSProperties
}) {
  const { member, isCreator, isHighlight, highlight, confirm, style } = props
  const memberHighlight = useCallback(() => highlight(member.userId), [highlight, member])
  const memberConfirm = useCallback(() => confirm(member), [confirm, member])

  return <div
    id={makeElementId(member.userId)}
    styleName={c('member', isHighlight && 'highlight')}
    style={style}
    onMouseEnter={memberHighlight}
    onClick={memberConfirm}
  >
    <div styleName="image-wrap">
      {member.userId === '0' ? (
        <div styleName="at-icon">@</div>
      ) : (
        <img src={member.avatar || defaultAvatar} />
      )}
    </div>
    <div styleName="name-wrap">
      <span styleName="name">{member.name}</span>
      {isCreator ? <Tag>群主</Tag> : null}
    </div>
  </div>
}
